<template>
  <v-chart class="bar" :option="option" />
</template>

<script>
import { use } from "echarts/core";

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";

import { BarChart } from "echarts/charts";

import { CanvasRenderer } from "echarts/renderers";

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
]);

import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "Bar",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  setup: () => {
    const option = ref({
      // title: {
      //   text: "世界人口总量",
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      // legend: {
      //   data: ["2011年", "2012年"],
      // },
      grid: {
        left: "0",
        right: "3%",
        top: "0",
        bottom:"10%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: "category",
        data: ["C2", "C1", "B2", "B1", "A2", "A1"],
      },
      series: [
        {
          // name: "2012年",
          type: "bar",
          data: [410, 160, 300, 150, 310, 580],
        },
      ],
      backgroundColor: "transparent",
    });

    return { option };
  },
});
</script>

<style lang="less" scoped>
.bar {
  width: 100%;
  height: 100%;
}
</style>
